import { useEffect, useState } from "react";
import { IsTrainingContext } from "./context";
import styles from "./styles.module.scss";
import TrainSettings from "./trainSettings";
import TrainMonitor from "./trainMonitor";
import { getStatus } from "../../api";

function TrainPage() {
  const [isTraining, setIsTraining] = useState(false);
  useEffect(() => {
    getStatus().then((status) => {
      setIsTraining(status === "TRAINING");
    });
  });
  return (
    <div className={styles.content}>
      <IsTrainingContext.Provider value={{ isTraining, setIsTraining }}>
        <TrainSettings></TrainSettings>
        <TrainMonitor></TrainMonitor>
      </IsTrainingContext.Provider>
    </div>
  );
}

export default TrainPage;
